import React from 'react'
import './index.css'
import todosStore from '../../../../store/todosStore'
import { observer } from 'mobx-react'

function Item({todo}) {
  return (
    <li className="todo-item">
      <label>
        <input type="checkbox" checked={todo.complete} onChange={() => todosStore.toggleTodo(todo.id)}/>
        <span className={todo.complete ? 'done' : ''}>{todo.title}</span>
      </label>
      <button className="btn btn-danger" onClick={() => todosStore.deleteTodo(todo.id)}>删除</button>
    </li>
  )
}
export default observer(Item)